<template>
	<div class="index-box" ref="index">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="search" ref="search">
					<el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
						class="demo-form-inline" id="searchBox">
						<el-form-item prop="code">
							<el-input v-model="searchForm.code" clearable placeholder="视频编号"></el-input>
						</el-form-item>
						<el-form-item prop="title">
							<el-input v-model="searchForm.title" clearable placeholder="视频主题"></el-input>
						</el-form-item>
						<el-form-item prop="userNameOrPhone">
							<el-input v-model="searchForm.userNameOrPhone" clearable placeholder="用户名称或手机号"></el-input>
						</el-form-item>
						<el-form-item prop="isPublic">
							<el-select v-model="searchForm.isPublic" clearable placeholder="公开类型">
							    <el-option label="公开" value="1"></el-option>
                  <el-option label="私密" value="0"></el-option>
							  </el-select>
						</el-form-item>
            <el-form-item prop="userType">
            	<el-select v-model="searchForm.userType" clearable placeholder="用户类型">
            	    <el-option label="系统" value="3"></el-option>
                  <el-option label="用户" value="1"></el-option>
            	  </el-select>
            </el-form-item>
						<el-form-item prop="areaCodeThis"  class="searchAddress">
							<el-cascader v-model="areaCodeThis" :props="areaProps" placeholder="请选择区域"
								clearable class="textInput" ref="cascaderAddr"></el-cascader>
						</el-form-item>

						<el-form-item prop="upTime">
							<el-date-picker v-model="upTime" type="daterange" align="right" unlink-panels
								range-separator="至" start-placeholder="上传开始日期" end-placeholder="上传结束日期"
								format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>

						<el-form-item prop="issueTime">
							<el-date-picker v-model="issueTime" type="daterange" align="right" unlink-panels
								range-separator="至" start-placeholder="发布开始日期" end-placeholder="发布结束日期"
								format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>


						<el-form-item class="clearfix">
							<el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
							<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="actionBtn" ref="actionBtn">
					<div class="actionBtnLeft">

						<el-radio-group v-model="searchForm.userLevel" size="small" @change="handleSearch">
							<el-radio-button >全部</el-radio-button>
							<el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}
							</el-radio-button>
						</el-radio-group>
             <el-button type="primary" @click="handleAdd()" icon="el-icon-plus" size="small" style="margin-left: 10px;"  v-has="'video:videoSet:add'">上传视频</el-button>

					</div>
					<div class="actionBtnRight">
						<MyRefresh></MyRefresh>
					</div>
				</div>

				<div class="table" ref="table">
					<el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight"
						v-loading="loading" @selection-change="handleSelectionChange"
						@sort-change="handleTablechangeSort" stripe
						:default-sort="{prop: 'applyTime', order: 'descending'}">
            <el-table-column prop="code" label="视频编号"  width="100" v-if="!hideTableColumn.includes('number')"></el-table-column>
            	<el-table-column prop="title" label="视频主题" v-if="!hideTableColumn.includes('storeName')" width="150" align="center">
                <template slot-scope="scope">
                	<div class="ellipsis-item3" :title="scope.row.title">{{scope.row.title}}</div>
                </template>
              </el-table-column>
						<el-table-column prop="name" label="视频" v-if="!hideTableColumn.includes('img')"
							align="center">
							<template #default="scope">
                <div class="videoBox">
                  <i class="el-icon-video-play icon" @click="hanleVideoView(scope.row.id)"></i>
                 <el-image style="height: 80px;" :src="scope.row.coverUrl" fit="fill" @click="hanleVideoView(scope.row.id)" ></el-image>
                </div>
							</template>
						</el-table-column>
            <el-table-column prop="comment" label="视频留言" v-if="!hideTableColumn.includes('memberType')" align="center">
              <template slot-scope="scope">
              	<div class="ellipsis-item3" :title="scope.row.comment">{{scope.row.comment}}</div>
              </template>
            </el-table-column>


						<el-table-column prop="provinceName" label="发布地区" v-if="!hideTableColumn.includes('name')" width="150" align="center">
              <template slot-scope="scope">
              	<div>{{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.areaName}}</div>
              </template>
            </el-table-column>
						<el-table-column prop="isPublic" label="公开类型" v-if="!hideTableColumn.includes('phone')" width="150" align="center">
              <template slot-scope="scope">
              	<div>{{scope.row.isPublic=='1'?'公开':'私密'}}</div>
              </template>
            </el-table-column>
						<el-table-column prop="nickname" label="绑定用户名" v-if="!hideTableColumn.includes('type')" align="center"></el-table-column>
						<el-table-column prop="telephone" label="绑定手机号" v-if="!hideTableColumn.includes('area')" align="center"></el-table-column></el-table-column>
						<el-table-column prop="userType" label="用户类型" width="100" align="center">
              <template slot-scope="scope">
              	<div>{{scope.row.userType=='3'?'特殊用户':'正常'}}</div>
              </template>
            </el-table-column>


						<el-table-column prop="createTime" label="上传日期" v-if="!hideTableColumn.includes('createTime')"
							sortable align="center" width="110"></el-table-column>
            <el-table-column prop="publishTime" label="正式发布日期" v-if="!hideTableColumn.includes('publishTime')"
            	sortable align="center" width="130"> </el-table-column>
            <el-table-column label="状态"  v-if="!hideTableColumn.includes('status')" align="center">
              <template #default="scope">
                <div class="d-flex justify-center">
                  <MySwitch :value.sync="scope.row.disabled" :id="scope.row.disabled" text="启用|禁用" textValue="0|1" @changeStatus="handleChangeStatus(scope.row)" :permission="hasBtn('video:videoSet:state')"></MySwitch>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center" prop="createTime" width="120"  v-if="!hideTableColumn.includes('sort')">
              <template slot-scope="scope">
                <div v-has="'shop:shopOperation:sort'">
                  <el-button icon="el-icon-top" circle size="mini" @click="hanleSort(scope.row,scope.$index,'0')" :disabled="scope.$index=='0'"></el-button>
                  <el-button icon="el-icon-bottom" circle size="mini" @click="hanleSort(scope.row,scope.$index,'1')" :disabled="scope.$index==searchForm.pageSize-1"></el-button>
                </div>
              </template>
            </el-table-column>
						<el-table-column prop="name" label="操作" width="200" align="center" fixed="right">
							<template #default="scope">
                  <div class="verticalBtn">
                    <el-button
                      size="medium"
                      type="text"
                      icon="el-icon-view"
                      @click="handleDetail(scope.row,'detail')"
                    >详情</el-button>
                    <el-button
                      size="medium"
                      type="text"
                      icon="el-icon-edit"
                      v-has="'video:videoSet:edit'"
                      @click="handleDetail(scope.row,'edit')"
                    >修改</el-button>
                    <el-button
                      size="medium"
                      type="text"
                      icon="el-icon-delete-solid"
                      v-has="'video:videoSet:delt'"
                      @click="handleDelt(scope.row)"
                    >删除</el-button>
                    <!-- <el-dropdown size="medium" >
                      <span class="el-dropdown-link">
                        <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                      </span>
                      <el-dropdown-menu slot="dropdown" >
                       <el-dropdown-item @click.native="handleBindShop(scope.row)" v-has="'video:videoSet:bindShop'">绑定商品</el-dropdown-item>
                        <el-dropdown-item @click.native="handleActive(scope.$index, scope.row,'editPw')" v-has="'video:videoSet:view'">查看商品</el-dropdown-item>
                        <el-dropdown-item @click.native="handleActive(scope.$index, scope.row,'delt')" v-has="'video:videoSet:delt'">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown> -->
                  </div>

							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="page" ref="page">
					<MyPagination :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
						@pagination="dataInfo" />
				</div>
			</el-col>
		</el-row>

    <!-- 视频查看	 -->
    <el-dialog title="视频查看" width="800px" :close-on-click-modal="false" v-dialogDrag :visible.sync="videoViewVisible" @close="videoViewVisible = false">
      <div style="text-align: center;">
        <video :src="videoViewUrl" controls style="max-width: 100%;"></video>
      </div>

    </el-dialog>

    <!-- 选择商品类型 -->
    <el-dialog title="商品专区" width="500px" v-dialogDrag :close-on-click-modal="false" :visible.sync="shopTypeVisible" @close="shopTypeVisible = false">
       <div class="shopOperationBox">
         <div style="padding-bottom: 10px;">请选择所属商品专区:</div>

           <el-radio-group v-model="shopOperationForm.goodsType" class="d-flex groupBox" style="flex-wrap: inherit;padding:0 100px">
             <el-radio label="1" >好礼</el-radio>
             <el-radio label="2" >好店</el-radio>
           </el-radio-group>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="shopTypeVisible = false" size="small">取 消</el-button>
         <el-button type="primary" @click="handleSureGoodsType()" size="small">确 定</el-button>
       </div>
     </el-dialog>

     <!--	选择商品	-->
     <el-dialog title="选择商品" :visible.sync="productsDialogVisible" :close-on-click-modal="false" v-dialogDrag>
       <div class="tableBox d-flex">
         <div class="leftBox" style="width: 160px;height:700px" v-if="shopOperationForm.goodsType=='1'">
             <el-tree :data="shopTypeList" node-key="categoryId" ref="tree"  current-node-key="" :props="defaultProps" default-expand-all :expand-on-click-node="false" @node-click="handleShopTypeNodeClick"></el-tree>
         </div>
         <div class="rightBox" style="flex:1">
           <div class="search-box">
               <el-form :inline="true" :model="shopDialog" size="small" ref="shopDialog" @submit.native.prevent
                 class="demo-form-inline d-flex " id="searchBox"  style="flex-wrap: wrap;">
                 <el-form-item prop="goodsCode" style="width:200px">
                     <el-input v-model="shopDialog.goodsCode" clearable placeholder="商品编号"></el-input>
                 </el-form-item>
                 <el-form-item prop="name" style="width:200px">
                     <el-input v-model="shopDialog.goodsName" clearable placeholder="商品名称"></el-input>
                 </el-form-item>
                 <el-form-item class="clearfix">
                   <el-button type="primary" @click="handleShopSearch()" icon="el-icon-search">搜索</el-button>
                 </el-form-item>
               </el-form>
             </div>
           <el-row :gutter="20">
             <el-col :span="6" v-for="(item, index) in shopDialogList" :key="index">
             	<el-card :body-style="{ padding: '0px' }"  style="margin-bottom: 10px;">
             		<img :src="item.goodsImage" height="185" style="margin: auto;display: block;">
             		<div style="padding: 14px;">
             			<p style="margin: 0px;" class="ellipsis-item" :title="item.goodsName">{{item.goodsName}}</p>
                  <p style="margin: 0px;" class="ellipsis-item" :title="item.goodsCode">({{item.goodsCode}})</p>
             			<el-button size="small" @click="checkShop(item)" :disabled="btnLoading">选择</el-button>
             		</div>
             	</el-card>
             </el-col>
             <el-empty :image-size="200" v-if="!shopDialogList.length"></el-empty>

           </el-row>
           <MyPagination
              v-if="shopDialogList.length"
             :total="shopDialog.total"
             :page.sync="shopDialog.pageNum"
             :limit.sync="shopDialog.pageSize"
             @pagination="getShopList"
           />
         </div>
       </div>


     	<div slot="footer" class="dialog-footer">
     		<el-button size="small" @click="productsDialogVisible = false">取 消</el-button>
     	</div>
     </el-dialog>
     <!--	选择商品	-->

	</div>
</template>
<script>
	import common from '@/api/api';
	import {
		videoList,
		videoAudit,
    videoDetail,
    videoOrderUpd,
    videoEdit,
    getCategoryGoodsList,
    getGoodsColumnList,
    videoBindGoods,
    videoDel
	} from '@/api/getData'
	import option from '../../common/option.js';

	export default {
		data() {
			let that = this;
			return {
				sta: true,
				loading: false,
				btnLoading: false,
				userVisible: false,
				upTime: [],
				issueTime: [],
				statusList: [{dictValue:'3',dictLabel:'审核中'},{dictValue:'4',dictLabel:'通过'},{dictValue:'5',dictLabel:'驳回'}],
        areaCodeThis:undefined,
				searchForm: {
          queryFrom:1,
					code: undefined,
					title: undefined,
					userNameOrPhone: undefined,
					isPublic: undefined,
					userType: undefined,

          provinceCode:undefined,
          cityCode:undefined,
          areaCode: undefined,
					status: '4',
					userLevel: undefined,
					orderByColumn: undefined,
					isAsc: undefined,
					pageNum: 1,
					pageSize: 20,
				},
				storeList: [],
				tableColumn: [],
				hideTableColumn: [],
				/*自定义表格列需要隐藏的*/
				tableColumnType: 'staffManagement',
				/*自定义表格列类型传参*/
				tableHeight: 0, //table 高度
				statusRow: {},
				dataList: [],
				total: 0,
				multipleSelection: '',
				dialogTitle: '',

				yesVisible: false,

				userList: [],
				auditVisible: false,
				user: {
					id: '',
					direction: '',
					rejectReason: ''
				},
				rules: {
					direction: [{
						required: true,
						message: '请选择是否审核通过',
						trigger: 'blur'
					}]
				},
				areaProps: {
					/*地址加载*/
					lazy: true,
					//checkStrictly: true,
					lazyLoad(node, resolve) {
            that.$axios({
                method: 'get',
                url: common.apihost+'/system/area/getList?pcode='+(node.value?node.value:'0'),
              }).then ((res) => {
                if (res.data.code == 200) {
                  const nodes = res.data.data;
                  nodes.forEach(item => {
                    item.value = item.code,
                    item.label = item.name,
                    item.leaf = item.level >= 2
                  })
                  resolve(nodes);
                } else {
                  this.$message.error(res.msg)
                }
              })
            }
				},
				levelList: [],
        videoViewVisible:false,
        videoViewUrl:'',

        statusRow:{},
        shopOperationForm:{
          goodsType:'',
          goodsId:'',
          operationId:'',
          imagePath:'',
          relationId:'',
          storeId:'',
        },
        shopOperationVisible:false,
        operationList:[],

        bannerImg:'',
        shopDialog:{
          goodsCode:"",
          goodsName:'',
          categoryId: '',
          storeName:'',
          parentCategoryId:'',
          total:0,
          pageNum:1,
          pageSize:10,
        },
        shopDialogList:[],
        productsDialogVisible:false,

        shopTypeVisible:false,
        shopTypeList:[],
        defaultProps: {
           children: 'children',
           label: 'name'
        },
			}
		},
		computed: {
			pickerOptions: () => {
				return option.pickerOptions;
			}
		},
		created() {
			this.getCategoryDetails({
				categoryKey: 'member_level_category'
			}).then((res) => {
				this.levelList = res.data
			})

		},
		mounted() {
			this.dataInfo();
			this.$nextTick(() => {
				this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs
					.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
			})
		},
		methods: {
      handleDelt(row){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            videoDel(row.id).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch(() => {
              console.log(1);
          });
      },
      async checkShop(item){/*选中商品*/
        try {
           this.loading = true;
           this.btnLoading = true;
           const result = await videoBindGoods({direction:'1',goodsId:item.goodsId,id:this.statusRow.id });
           if (result.code == 200) {
              this.$message.success('成功');
             this.productsDialogVisible = false;
             this.innerVisible = false
             this.dataInfo();
           } else {
             this.$message.error(result.msg);
           }
           this.loading = false;
           this.btnLoading = false;
         } catch (err) {
           console.log(err)
         }
      },
      /** 弹框商品类型树节点点击事件 **/
      handleShopTypeNodeClick(data){
        this.shopDialog.categoryId =  data.categoryId;
        this.shopDialog.parentCategoryId = data.parentId;
        this.getShopList();
      },
      async getShopList(){
        try {
          this.dialogLoading = true;
          let result = '';
          if(this.shopOperationForm.goodsType=='1'){
            result = await getCategoryGoodsList(this.shopDialog);
          }else{
            let data = {
              goodsCode:this.shopDialog.goodsCode,
              goodsName:this.shopDialog.goodsName,
              goodsCategoryId:this.shopDialog.categoryId,
              storeName:this.shopDialog.storeName,
              parentCategoryId:this.shopDialog.parentCategoryId,
              pageNum:this.shopDialog.pageNum,
              pageSize:this.shopDialog.pageSize,
            }
            result = await getGoodsColumnList(data);
          }
          if (result.code == 200) {
            this.shopDialog.total = result.total;
            this.shopDialogList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.dialogLoading = false;
        } catch (err) {
          this.dialogLoading = false;
          console.log(err)
        }
      },
      handleSureGoodsType(){
        if(!this.shopOperationForm.goodsType){
           this.$message.error('请选择所属商品专区')
        }else{
          this.shopTypeVisible = false;
          this.productsDialogVisible = true;
          this.getCategoryDetails({categoryKey:'product_category'})
          .then(res=>{
            this.shopTypeList = [{
              categoryId:'',
              children: res.data,
              name: "商品分类",
            }];
          })
          this.getShopList();
        }
      },
      handleBindShop(row){
        this.statusRow = row;
        this.shopOperationForm.goodsType = '';
        this.shopTypeVisible = true;
      },
      handleDetail(row,type){
        this.$router.push({
        	path: '/video/upVideo',
        	query: {
        		type: type,
        		id:row.id
        	}
        });
      },
      /** 用户角色状态修改 **/
      async handleChangeStatus(row) {
        try {
          let data = {
            id : row.id,
            disabled: row.disabled
          }
          const result = await videoEdit(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.status = !row.status;
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleAdd(){
       this.$router.push({
       	path: '/video/upVideo',
       	query: {
       		type: 'add',
       	}
       });
      },
      hanleSort(row,index,type){
        let newData = {
          videoId:row.id,
          direction:type
        }
        let data = this.addDateRange(this.searchForm, this.upTime, 'createTimeStart', 'createTimeEnd');
        data = this.addDateRange(this.searchForm, this.issueTime, 'publishTimeStart', 'publishTimeEnd');
        let code = this.areaCodeThis;
        data.provinceCode = undefined;
        data.cityCode = undefined;
        data.areaCode = undefined;
        if(code){
          code[0] && (data.provinceCode = code[0].substring(code[0].indexOf(',')+1,code[0].length));
          code[1] && (data.cityCode = code[1].substring(code[1].indexOf(',')+1,code[1].length));
          code[2] && (data.areaCode = code[2].substring(code[2].indexOf(',')+1,code[2].length));
        }
        let statusData =  Object.assign(newData, data);
        statusData.pageNum = undefined;
        statusData.pageSize = undefined;
        videoOrderUpd(statusData).then((result)=>{
        		if (result.code == 200) {
              this.$message.success(result.msg);
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
        })
      },
      hanleVideoView(id){
        videoDetail(id).then((result) => {
        	if (result.code == 200) {
        		this.videoViewVisible = true;
            this.videoViewUrl = result.data.url;
        	} else {
        		this.$message.error(result.msg);
        	}
        });
      },
			resetQuery() {
				this.upTime = [];
				this.issueTime = [];
        this.areaCodeThis = undefined;
				this.resetForm('searchForm');
				this.dataInfo();
			},
			handleSearch() {
				this.page = 1;
				this.dataInfo();
			},
			handleEdit(row) {
				this.$router.push({
					path: '/user/applyStoreNew',
					query: {
						storeId: row.storeId,
						type: 'edit',
						customerId: row.customerStoreId,
						entrance: 'audit'
					}
				});
			},
			handleView(row) {
				this.$router.push({
					path: '/user/applyStoreNew',
					query: {
						storeId: row.storeId,
						type: 'detail',
						customerId: row.customerStoreId,
						entrance: 'audit'
					}
				});
			},
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.categoryId,
					label: node.name,
					children: node.children
				};
			},
			async dataInfo() {
				try {
					let data = this.addDateRange(this.searchForm, this.upTime, 'createTimeStart', 'createTimeEnd');
					data = this.addDateRange(this.searchForm, this.issueTime, 'publishTimeStart', 'publishTimeEnd');
          let code = this.areaCodeThis;
          data.provinceCode = undefined;
          data.cityCode = undefined;
          data.areaCode = undefined;
          if(code){
            code[0] && (data.provinceCode = code[0]);
            code[1] && (data.cityCode = code[1]);
            code[2] && (data.areaCode = code[2]);
          }
					this.loading = true;
					const result = await videoList(data);
					if (result.code == 200) {
						this.total = result.total;
						this.dataList = result.rows;
            console.log(this.dataList)
					} else {
						this.$message.error(result.msg);
					}
					this.loading = false;
				} catch (err) {
					this.loading = false;
					console.log(err)
				}
			},
			/** 表格排序 **/
			handleTablechangeSort(column, prop, order) {
				this.searchForm.orderByColumn = column.prop;
				this.searchForm.isAsc = column.order;
				this.dataInfo();
			},
			/** 认证信息 **/
			handleAuthentication(row) {
				row.contractPic = row.contractPic.split(',');
				this.statusRow = row;
				this.yesVisible = true;
			},
			/** 商家审核按钮点击 **/
			handleAudit(row) {
				let statusRow = JSON.parse(JSON.stringify(row));
				this.statusRow = statusRow;
				this.user.id = statusRow.id;
				this.user.direction = '';
				this.user.rejectReason = '';
				this.auditVisible = true;
			},
			/** 商家审核提交 **/
			storeAuditSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.btnLoading = true;
						videoAudit(this.user).then((result) => {
							if (result.code == 200) {
								this.$message.success(result.msg);
								this.auditVisible = false;
								this.dataInfo();
							} else {
								this.$message.error(result.msg);
							}
							this.btnLoading = false;
						});
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},

		}
	}
</script>

<style scoped lang="scss">
  .videoBox{
    position: relative;
    cursor: pointer;
    .icon{
      font-size: 30px;
      position: absolute;
      left:50%;
      top:50%;
      z-index: 10;
      margin-left:-15px;
      margin-top:-15px;
    }
  }
	.searchAddress /deep/ .el-input {
		width: 250px !important;
	}

	.el-table .el-dropdown-link {
		cursor: pointer;
		color: #61997A;
		margin-left: 5px;
	}

	.leftDialog {
		height: 540px;
		overflow-y: auto;
	}

	.activeVerticalBox .activeItem {
		color: #61997A;
		cursor: pointer;
		margin: 0px;
		text-align: center;
		height: 20px;
		line-height: 20px;
	}

	.activeVerticalBox .el-dropdown {
		display: flex;
		justify-content: center;
		color: #61997A;
		cursor: pointer;
	}

	.activeCheckedBox {
		border-top: 1px solid #ddd;
		padding: 10px;
		height: 52px;

		.el-tag {
			margin-right: 10px;
		}
	}

	.rateBox /deep/ .el-rate__icon {
		margin-right: 0px;
	}

	.rateBox>p {
		margin: 0px;
	}

	.rateBox>p>/deep/ .el-rate {
		height: 25px;
		line-height: 25px;
		display: flex;
	}

	.rateBox>p>/deep/ .el-rate .el-rate__item {
		display: flex;
		align-items: center;
	}

	.rateBox .rateText {
		width: 60px;
	}

	.rateBox .content {
		display: flex;
	}

	.rateBox .el-tooltip {
		width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
</style>
